<template>
    <view class="question pb-150">
        <Navigation title="常见问题" background="#fff" />
        <view class="w-f h-200 bg pl-64 pr-24 f">
            <view class="fs-32 text-color pt-42">亲～，有什么需要咨询我的啊？</view>
            <image
                :src="getBaseUrl() + '/admin-api/system/file/19/get/ca56c89c3d45a29eed56378c59661e1177939a35a83cc5f73fcfefec39add984.png'"
                class="w-200 h-200"
            ></image>
        </view>
        <view class="ph-40 pt-32 bg-white mt-20">
            <view class="f ai-c jc-c mb-28">
                <view class="w-464 h-56 b-10 tab f fs-26 text-color4 ph-4 pt-4">
                    <view
                        class="f ai-c jc-c"
                        v-for="(item, index) in typeList"
                        :key="index"
                        :class="index == curt ? 'active' : ''"
                        @click="changeCurt(index)"
                        >{{ item.label }}</view
                    >
                </view>
            </view>
            <view class="f ai-c jc-s-b list w-f pv-34" v-for="(item, index) in list" :key="index" @click="toDetail(item)">
                <view class="fs-32 text-color4 mr-32">{{ item.title }}</view>
                <u-icon name="arrow-right" color="#CCCCCC" size="13"></u-icon>
            </view>
        </view>
        <view :style="{ paddingBottom: safeAreaBottom + 'px' }" class="bot w-f">
            <view class="f h-112 ai-c jc-c" @click="toComplaint">
                <image src="http://cwht.ricecs.cn/app/mine/feedback.png" class="w-40 h-40 mr-16"></image>
                <view class="fs-32 fw-600 text-color4">意见反馈</view>
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
import { ref } from 'vue';
import { getBaseUrl } from '@/utils/env';
import { issuesPage } from '@/services/api/mine/question';
import { dictDataType } from '@/services/api/dict';
const curt = ref(0);
const typeList = ref<any[]>([]);
const list = ref<any[]>([]);
const listParams = ref<any>({
    pageNo: 1,
    pageSize: 10,
    category: '',
});
onLoad(() => {
    list.value = [];
    listParams.value.pageNo = 1;
    getTypeList();
});
//下拉刷新
onPullDownRefresh(() => {
    list.value = [];
    listParams.value.pageNo = 1;
    getList();
});
//上拉加载
onReachBottom(() => {
    listParams.value.pageNo++;
    getList();
});
async function getList() {
    const { data } = await issuesPage(listParams.value);
    uni.stopPullDownRefresh();
    list.value = list.value.concat(data.list);
}
//获取类型
async function getTypeList() {
    const { data } = await dictDataType({ type: 'system_issues_category' });
    typeList.value = data;
    listParams.value.category = typeList.value[curt.value].value;
    getList();
}
function changeCurt(data: number) {
    curt.value = data;
    listParams.value.category = typeList.value[curt.value].value;
    list.value = [];
    listParams.value.pageNo = 1;
    getList();
}
function toDetail(item: any) {
    uni.navigateTo({
        url: `/pages_mine/questionDetail?id=${item.id}`,
    });
}
function toComplaint() {
    uni.navigateTo({
        url: '/pages_mine/complaint',
    });
}
//底部安全距离
const systemInfo = uni.getSystemInfoSync();
let safeArea = systemInfo.safeArea;
let screenHeight = systemInfo.screenHeight;
let safeAreaBottom = screenHeight - safeArea.bottom;
</script>
<style lang="scss" scoped>
.question {
    background: #f5f5f5;
    min-height: 100vh;
    .bot {
        position: fixed;
        left: 0;
        bottom: 0;
        background: #fff;
    }
    .list {
        border-bottom: 1px solid #f5f5f5;
    }
    .tab {
        background: #f5f5f5;
        view {
            width: 33.33%;
            height: 100%;
        }
        .active {
            background: #fff;
            font-weight: 600;
            border-radius: 8rpx;
        }
    }
    .bg-white {
        background: #fff;
    }
    .bg {
        background-image: linear-gradient(180deg, #fff3dc 0%, #ffffff 100%);
    }
}
</style>
